vue 页面跳转之参数传递与接收参数

您所在的位置：网站首页 › wpf 页面跳转传参 › vue 页面跳转之参数传递与接收参数

vue 页面跳转之参数传递与接收参数

2024-01-25 15:09| 来源: 网络整理| 查看: 265

一、跳转方式

vue中页面跳转方式分别由标签跳转与编程式路由跳转。

标签跳转：映射路由

编程式路由跳转： this.$router.push()

二、不带参数跳转

标签跳转

有两种写法，默认path参数与显式使用path参数。

跳转跳转

编程式路由跳转

跳转 jump() { this.$router.push('/linkTo'); } 三、带参数跳转

带参数跳转有query与params两种带参数的方式，其中query方法相当于是HTTP请求中的GET方法，会把参数加在URL后面再进行跳转；params方法相当于是HTTP请求中的POST方法，URL保持不变。

需要注意的是query方法使用的是path参数，对应的是router.js中的路由规则中的path项。

params方法使用的是name参数，对应的是router.js中的路由规则中的name项。

3.1 标签跳转

跳转

//query方式跳转 //params方式跳转

接受参数

// 以query方式接收参数：【query传递数据是通过URL传递的，类似ajax中的get方式】 console.log(this.$route.query.name); // ming console.log(this.$route.query.age); // 18 // 以params方式接收参数：【params方式，类似ajax中的post方式】 console.log(this.$route.params.name); // ming console.log(this.$route.params.age); // 18

3.2 编程式路由跳转

跳转

//query方式跳转 jump1() { this.$router.push({ path: '/linkTo', query: { name: "ming", age: 18 } }); } //⚠️注：如果要传递的参数很长时，请用params方式，因为query方式是通过URL传递的，而URL传参数长度是有限制的哦！！ //params方式跳转 open2() { this.$router.push({ name: "abolinkTout", // ⚠️注：这里不能用path路径，只能用name【请对照router.js中的路由规则中的name项】，否则取不到传过去的数据 params: { name: "ming", age: 18 } }); }

接受参数

//⚠️注：在传递参数时，用什么方式传参，就用什么方式接收！！ // 以query方式接收参数：【query传递数据是通过URL传递的，类似ajax中的get方式】 console.log(this.$route.query.name); // ming console.log(this.$route.query.age); // 18 // 以params方式接收参数：【params方式，类似ajax中的post方式】 console.log(this.$route.params.name); // ming console.log(this.$route.params.age); // 18 // this.$route 路由信息对象 console.log(this.$route); 四、总结

vue中页面跳转有标签跳转与this.$router.push()编程式路由跳转两种方式，在无参数跳转时就只需要加一个path就可以了。带参数跳转时分为query和params两种带参数的方式，如果参数不长或者参数可以让用户看到就可以使用query的方式传递参数，如果参数很多或很长或者参数不想让用户发现则采用params方式传递参数，同时需要记住的是query对应使用router.js中的path，params使用router.js中的name；接受参数的方式就是用什么方式传的就用什么方式接受就可以了。

【本文地址】

vue 页面跳转之参数传递与接收参数

vue 页面跳转之参数传递与接收参数

今日新闻

推荐新闻